'use strict'
import React, {Component} from 'react'

import {HttpService, Tips} from '../Tools'
import Header from './Common/Header'

import '../scss/buy.scss'
import '../scss/school.scss'

import imgSearch from '../Img/school/search.png'
import imgClean from '../Img/school/clean.png'
import imgWeixin from '../Img/buy/weixin.png'
import imgLoad from '../Img/school/load2.gif'

export default class Buy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schoolId: '', //学校ID
            schoolName: '', //学校名称
            schoolAddress: '', //学校地址
            dataList: [], //学校数据
            clean: 0, //清空按钮状态
            dataLoad: 0, //数据加载状态
            dataNull: 0, //数据是否为空
            dataEnd: 0 //数据结束
        }
        //查询数据参数
        this.pageindex = 1; //页号
        this.pagesize = 10; //页大小
        this.schoolname = ''; //学校名称
        this.toBottom = 100; //滚动加载底部距离
    }

    //选择学校操作
    schSlt(schoolId, e) {
        var sltObj = document.querySelector('#schbox .slt');
        if (sltObj)
            sltObj.className = 'item';
        var schList = document.querySelector('#schbox .item[data-id="' + schoolId + '"]');
        schList.className = 'item slt';
        location.href = '#/buy/' + schoolId + '/' + encodeURI(schList.children[0].innerHTML) + '/' + encodeURI(schList.children[1].innerHTML);
    }

    //查询学校数据
    getSchool() {
        if (this.state.dataLoad == 1)
            return;
        if (this.schoolname == '')
            return;
        this.setState({dataLoad: 1, dataEnd: 0, dataNull: 0});
        HttpService.query({
            url: '/apph5/school/getList',
            data: {
                schoolname: this.schoolname,
                pageindex: this.pageindex,
                pagesize: this.pagesize,
                weixinclient: true
            },
            async: false,
            success: (res => {
                this.setState({dataLoad: 0});
                if (res.code == 10140) {
                    //获取数据成功
                    let newData = this.state.dataList.concat(res.data.schools);
                    this.setState({dataList: newData});
                    if (res.data.recordcount == this.pagesize) {
                        this.setState({dataEnd: 1});
                        return;
                    }
                    if (res.data.schools.length < this.pagesize) {
                        this.setState({dataEnd: 1});
                        if (res.data.schools.length == 0 && newData.length == 0) {
                            this.setState({dataEnd: 0, dataNull: 1});
                        }
                    }
                    return;
                }
                Tips(res.msg);
            })
        })
    }

    //页面进来时执行
    componentWillMount() {
        //获取跳转过来的schoolId
        const schoolid = this.props.params.schoolId;
        if (!isNaN(schoolid)) {
            const schoolname = decodeURI(this.props.params.schoolName);
            const schoolAddress = decodeURI(this.props.params.schoolAddress);
            const oldData = [
                {
                    schoolid,
                    schoolname: decodeURI(schoolname),
                    yijiaoid: 'slt',
                    schooladdress: schoolAddress
                }
            ];
            this.setState({dataList: oldData, schoolId: schoolid, schoolName: schoolname, schoolAddress: schoolAddress});
            return;
        }
    }

    //加载新数据
    // schGet(e) {
    //     this.schoolname = e.target.value.replace(/\s/g, '');
    //     if (this.schoolname != '') {
    //         this.setState({clean: 1});
    //     } else {
    //         this.setState({clean: 0});
    //     }
    // }

    //提交数据
    smtSelect(e) {
        e.preventDefault();
        this.pageindex = 1;
        this.schoolname = this.refs.schtxt.value.replace(/\s/g, '');
        if (this.schoolname != '') {
            this.setState({clean: 1, dataList: []});
            this.getSchool();
        } else {
            this.setState({clean: 0});
        }
    }

    //滚动加载更多
    componentDidMount() {
        var bindName = "input";
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bindName = "propertychange";
        }
        this.refs.schtxt.addEventListener(bindName, this.smtSelect.bind(this));
        window.onscroll = () => {
            if (this.state.dataLoad == 1 || this.state.dataEnd == 1 || this.state.dataNull == 1)
                return;
            if (document.body.clientHeight - window.innerHeight - document.body.scrollTop <= this.toBottom) {
                this.pageindex++;
                this.getSchool();
            }
        }
    }

    //跳转判断
    sltFn() {
        if (this.state.schoolId == undefined || this.state.schoolId == '') {
            location.href = '#/buy'
        } else {
            location.href = '#/buy/' + this.state.schoolId + '/' + encodeURI(this.state.schoolName) + '/' + encodeURI(this.state.schoolAddress);
        }
    }

    //清空数据
    cleanTxt() {
        document.getElementById('schtxt').value = '';
        this.setState({clean: 0});
    }
    render() {
        let schoolList = this.state.dataList.map((item, index) => {
            let address = (item.province || '') + (item.city || '') + (item.town || '');
            if (item.schooladdress != 'undefined' && item.schooladdress != undefined)
                address = item.schooladdress;
            const sigle = address == ''
                ? 'sigle'
                : '';
            return (
                <li className={'item ' + item.yijiaoid + ' ' + sigle} onClick={this.schSlt.bind(this, item.schoolid)} data-id={item.schoolid}>
                    <p className='sname'>{item.schoolname}</p>
                    <p className='adrs'>{address}
                    </p>
                </li>
            )
        })
        return (
            <div className='buybox schbox' id='schbox'>
                <Header title='选择学校' addFn={this.sltFn.bind(this)}/>
                <form onSubmit={this.smtSelect.bind(this)} action=''>
                    <img src={imgSearch}/>
                    <input type='search' placeholder='输入关键字搜索学校' id='schtxt' ref='schtxt' onKeyUp={this.smtSelect.bind(this)}/> {this.state.clean == '1'
                        ? <img className='clean' src={imgClean} onClick={this.cleanTxt.bind(this)} id='clean'/>
                        : ''
}
                </form>
                <ul>
                    {schoolList}
                    {this.state.dataLoad == 1
                        ? <li className='load'>
                                <img src={imgLoad}/>
                                数据正在加载中...
                            </li>
                        : ''}{this.state.dataNull == 1
                        ? <li className='load datano'>
                                没有查到相关数据
                            </li>
                        : ''
}{this.state.dataEnd == 1
                        ? <li className='load dataend'>
                                已加载全部数据
                            </li>
                        : ''
}

                </ul>
            </div>
        )
    }
}
